<template>
    <echart :options="option" class="echarts"> </echart>
</template>

<style scoped>
.echarts {
  height: 100%;
  width: 100%;
  border-radius: 25px;
}
</style>
<script>
var data = [70, 34, 60, 78, 69, 65, 50, 50, 75, 50];
var titlename = [
  "历史服务器1：128.64.151.3",
  "历史服务器2：128.64.151.3",
  "实时服务器1：128.64.151.3",
  "实时服务器2：128.64.151.3",
  "接口服务器1：128.64.151.3",
  "接口服务器2：128.64.151.2",
  "转发服务器1：128.64.151.3",
  "转发服务器2：128.64.151.4",
  "远程FEP1：128.64.151.3",
  "远程FEP2：128.64.151.4"
];
// var valdata = [83, 34, 34, 23, 45,65,50,50,75,50];
var valdata = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100];

export default {
  data: function() {
    return {
      option: {
        title: {
          text: "服务器CPU使用情况                                        ",
          x: "4%",
          y: "2%",
          backgroundColor:"#0A3C60",
          textStyle: {
            fontWeight: "normal",
            fontSize: 20,
            color: "#fff"
          }
        },
        backgroundColor: "#0D2A42",
        xAxis: {
          show: false
        },
        grid: {
          x: "40%",
          width: "40%",
          height: "80%"
        },
        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#fff",
              formatter: function(value, index) {
                return [value].join("\n");
              }
            }
          },
          {
            show: false,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff"
              }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        xAxis: [
          {
            type: "value",
            max: 100,
            splitLine: {
              show: false
            },
             axisLine:{ 
                 show:false
             },
             axisTick :{ 
                 show:false
             },
            axisLabel: {
              color: "#fff",
            },
          }
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: data,
            barWidth: "20%",
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: "#56D0E3"
              }
            },
            label: {
              normal: {
                // show: true,
                // position: 'inside',
                // formatter: '{c}%'
              }
            }
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
            barWidth: "20%",
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15
              }
            }
          }
        ]
      }
    };
  }
};
</script>
